﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Demo.Web.Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Store ID="Store1" runat="server" PageSize="10">
            <Reader>
                <ext:JsonReader>
                    <Fields>
                        <ext:RecordField Name="Title" />
                        <ext:RecordField Name="FirsName" Type="String" />
                        <ext:RecordField Name="LastName" Type="String" />
                        <ext:RecordField Name="EmailAdrres" Type="String" />
                        <ext:RecordField Name="Phone" Type="String" />
                    </Fields>
                </ext:JsonReader>
            </Reader>
        </ext:Store>
        <ext:GridPanel ID="GridPanel1" runat="server" StoreID="Store1" Title="DataTable Grid"
            Width="600" Height="320">
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column runat="server" Header = "Title"  DataIndex="Title">
                        
                    </ext:Column>
                    <ext:Column runat="server" Header ="FirsName" DataIndex="FirsName">
                        
                    </ext:Column>
                    <ext:Column runat="server" Header="LastName" DataIndex="LastName">
                    </ext:Column>
                    <ext:Column runat="server" Header="EmailAdrres" DataIndex="EmailAdrres">
                    </ext:Column>
                    <ext:DateColumn runat="server" Header="Phone" DataIndex="Phone" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Multi" />
            </SelectionModel>
            <BottomBar>
                <ext:PagingToolbar ID="PagingToolbar1" runat="server" StoreID="Store1" />
            </BottomBar>
        </ext:GridPanel>
    </div>


    <ext:ComboBox 
                id="SelectBox1"
                runat="server"
                DisplayField="Common"
                ValueField="Common"
                TypeAhead="false"
                LoadingText="Searching..."
                Width="570"
                PageSize="10"
                HideTrigger="true"
                ItemSelector="div.search-item"       
                MinChars="1">
                <Store>
                    <ext:Store ID="Store2" runat="server" AutoLoad="false">
                        <Reader>
                           <ext:JsonReader IDProperty="ID">
                                <Fields>
                                    <ext:RecordField Name="ID" />
                                    <ext:RecordField Name="Desc" />
                                </Fields>
                            </ext:JsonReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <Template ID="Template1" runat="server">
                   <Html>
                       <tpl for=".">
                          <div class="search-item">
                           <%--  <h3><span>{ID}</span></h3>--%>
                              <h3><span>{Desc}</span></h3>
                      
                          </div>
                       </tpl>
                   </Html>
                </Template>
            </ext:ComboBox>    
    </form>
</body>
</html>
